<template>
  <div>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :hide-required-asterisk="true" :status-icon="true">
        <el-form-item label="颜色" :label-width="formLabelWidth">
          <el-input class="inp1" v-model="color"></el-input>
        </el-form-item>
        <el-form-item label="容量" :label-width="formLabelWidth">
          <el-input class="inp1" v-model="capacity"></el-input>
        </el-form-item>
        <el-form-item label="内存" :label-width="formLabelWidth">
          <el-input class="inp1" v-model="memory"></el-input>
        </el-form-item>
        <el-form-item label="成色" :label-width="formLabelWidth">
          <el-input class="inp1" v-model="old"></el-input>
        </el-form-item>
        <el-form-item label="是否包邮" :label-width="formLabelWidth">
          <el-input class="inp1" v-model="changes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addSujetTitle()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-card class="el-card" shadow="hover" :body-style="{ padding: '0px' }">
      <button @click="addParams()">添加</button>
      <!-- 表格 -->
      <el-table
        :data="list"
        border
        style="width: 100%"
        @cell-click="handleCurrentChange"
      >
        <el-table-column label="颜色">
          <template scope="scope">
            <span v-if="show === true">{{ scope.row.color }}</span>
            <el-input
              size="small"
              v-model="scope.row.color"
              placeholder="请输入内容"
              @change="handleEdit(scope.$index, scope.row)"
              v-else
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="capacity"
          width="150"
          align="center"
          label="容量"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="memory"
          width="150"
          align="center"
          label="内存"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="old"
          width="150"
          align="center"
          label="成色"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="changes"
          width="150"
          align="center"
          label="选填项"
          fixed
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import http from '../api/index';
import util from '../lib/index.js';
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      color: '',
      capacity: '',
      memory: '',
      old: '',
      changes: '',
      formLabelWidth: '140px',
      show: true,
      tableData: [
        {
          name: 'test',
          editeFlag: false,
        },
        {
          name: 'test',
          editeFlag: false,
        },
        {
          name: 'test',
          editeFlag: false,
        },
        {
          name: 'test',
          editeFlag: false,
        },
      ],
      inputColumn1: '', //第一列的输入框
    };
  },
  mounted() {
    util.dealAll({}).then((res) => {
      console.log(res.data.data);
      this.list = res.data.data;
      this.list.rowShow=0;
    });
  },
  methods: {
    //单元格单击
    handleCurrentChange(row, column, cell) {
      console.log('row', row);
      console.log('column', column);
      console.log('cell', cell);
      this.show = false;
    },
    //编辑
    handleEdit(index, row) {
      console.log(row, index);
    },

      addParams() {
      util.addParams({}).then((res) => {
        console.log(res);
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.tb-edit .input-box {
  display: none;
}
.tb-edit .current-cell .input-box {
  display: block;
  margin-left: -15px;
}
#editCont {
  display: none;
}
</style>